<template>
  <div class="login-wrap">
    <div class="login-left-box">
      <img src="@/img/登录页_slices/组102@2x.png" class="login-logo" />
      <img src="@/img/登录页_slices/图层3472@2x.png" class="login-img" />
      <div class="login-left-art-font-en">HAPPY LIVE</div>
      <div class="login-left-block"></div>
      <div class="login-left-art-font-cn">直播管家可视化平台</div>
    </div>
    <LoginContent></LoginContent>
  </div>
</template>

<script lang="ts" setup>
import LoginContent from "./component/LoginContent.vue";
</script>

<style lang="less" scoped>
.login-wrap {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  display: flex;
  min-width: 76.25rem;

  .login-left-box {
    width: 41.3rem;
    height: 100%;
    position: relative;
    .login-logo {
      position: absolute;
      width: 11.08rem;
      height: 2.96rem;
      left: 2.25rem;
      top: 2.25rem;
      z-index: 10;
    }

    .login-img {
      position: absolute;
      width: 43.65rem;
      height: 32.8rem;
      top: 4.6rem;
    }

    .login-left-art-font-en {
      width: 24.25rem;
      height: 4.1rem;
      font-size: 5.2rem;
      font-family: Impact;
      font-weight: 400;
      color: #976fff;
      line-height: 4.1rem;
      position: absolute;
      left: 15.2rem;
      top: 34.1rem;
      letter-spacing: 0.1765rem;
    }

    .login-left-block {
      width: 2.45rem;
      height: 0.3rem;
      background: #7d4bff;
      position: absolute;
      top: 39.6rem;
      left: 36.85rem;
    }

    .login-left-art-font-cn {
      width: 20rem;
      height: 2.21rem;
      font-size: 2.19rem;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #976fff;
      line-height: 2.21rem;
      position: absolute;
      top: 40.85rem;
      left: 19.55rem;
    }
  }
}
</style>
